<template>
  <div class="grid-flex card-page">
    <h2>网格布局实际运用</h2>
    <div class="card-wrap">
      <div class="card"
        v-for="item in tableList"
        :key="item.id">
        <img class="img"
          :src="item.iconImageurl || require('@/assets/image/img-default.png') "
          alt="" />
        <div class="mask">
          <div class="btn-box">
            <div class="btn-wrap">
              <el-button @click="toDetails(item)"
                class="btn1 btn">服务详情</el-button>
            </div>
            <div class="btn-wrap">
              <el-button @click="serviceApply(item)"
                type="primary"
                class="btn2 btn">服务申请</el-button>
            </div>
          </div>
        </div>
        <div class="info-wrap">
          <div class="title">{{item.name}}</div>
          <div class="text">
            {{item.describe}}
          </div>
          <div>
            <span class="info">来源：{{item.produceUnit}}</span>
            <span v-if="item.xzqName"
              class="lbl-icon icon-lightgreen">{{item.xzqName}}</span>
            <span v-if="item.year"
              class="lbl-icon icon-pinkgreen">{{item.year}}</span>
          </div>
        </div>
      </div>
    </div>
    <h2>网格布局其他示例</h2>
    <div class="test-wrap">
      <p>1、grid-template-columns设置了三个值，有4个子元素，剩下的值会按顺序与设置的值对应。2、grid-template-rows用法与columns的类似设置横向的高度。3、设置display:
        inline-grid;跟inline-block效果类似，vertical-align属性也适用。4、使用父使用grid-template-columns: 1fr 1fr
        2fr;需要自身有定宽。fr：表示按配额比例分配可用空间。5、fr的计算基于其它单位分配后的剩余空间。6、repeat(3, 1fr);表示3个1fr。</p>
      <p></p>
      <div class="item-box">
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
      </div>
      <div class="item-box2">
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
      </div>
      <div class="item-box3">
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
      </div>
      <div class="item-box4">
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import { gridlist } from '../test.js';
  export default {
    data() {
      return {
        tableList: []
      };
    },
    created() {
      this.tableList = gridlist;
    },
    methods: {
      toDetails(item) {
        console.log('hello');
        this.$router.push({ path: '/grid-flex/serve-detail', query: { id: item.id } });
      },
      serviceApply(item) {
        console.log('----服务申请---', item);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .grid-flex {
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    .card-wrap {
      display: grid;
      gap: 20px 20px;
      /* gap是grid-gap的缩写，第一个是row，第二个是column*/
      // grid-gap: 20px 20px;
      grid-template-columns: repeat(4, 1fr);
      .card {
        position: relative;
        border: 1px solid #dfe0e1;
        border-radius: 6px;
        padding-bottom: 10px;
        overflow: hidden;
        cursor: pointer;
        .img {
          width: 100%;
          height: 240px;
          border-bottom: 1px solid $--border-color;
        }
        &:hover {
          .mask {
            display: block;
          }
        }
        .mask {
          position: absolute;
          top: 0;
          left: 0;
          z-index: $--zindex-min;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.3);
          display: none;
          .btn-box {
            padding: 40% 0;
            width: 100%;
            height: 100%;
            .btn-wrap {
              text-align: center;
              z-index: 10000;
              .btn {
                width: 110px;
                height: 36px;
                border-radius: 3px;
              }
              .btn1 {
                margin-bottom: 20px;
              }
            }
          }
        }
        .info-wrap {
          padding: 10px 20px;
          .title {
            font-weight: bold;
            font-size: 18px;
            color: $--primary-text;
            margin-bottom: 15px;
          }
          .text {
            font-size: 14px;
            margin-bottom: 15px;
          }
          .info {
            color: $--secondary-text;
            font-size: 14px;
            margin-right: 20px;
          }
          .lbl-icon {
            padding: 5px 5px;
            font-size: 12px;
            border-radius: $--general-radius;
            margin-right: 10px;
          }
        }
      }
    }

    .test-wrap {
      .item-box {
        display: inline-grid;
        height: 100px;
        grid-template-columns: 90px 50px 120px;
        grid-column-gap: 16px;
        grid-row-gap: 16px;
        margin-right: 20px;
        vertical-align: top;
      }
      .item-box2 {
        display: inline-grid;
        grid-template-columns: 90px 50px 120px;
        grid-template-rows: 50px 80px;
        grid-column-gap: 16px;
        grid-row-gap: 16px;
        margin-right: 20px;
      }
      .item-box3 {
        display: inline-grid;
        margin-right: 20px;
        width: 400px;
        grid-template-columns: 1fr 1fr 2fr;
        grid-template-rows: 50px 80px;
        grid-column-gap: 16px;
        grid-row-gap: 16px;
      }
      .item-box4 {
        display: inline-grid;
        width: 400px;
        height: 100px;
        grid-template-columns: 30px 25% 1fr 2fr;
        // grid-template-rows: 50px 80px;
        grid-column-gap: 16px;
        grid-row-gap: 16px;
      }
      .test-item {
        background-color: #ff6600;
      }
    }
  }
</style>